<template>
  <div class="addlist">
    <van-nav-bar
      :title="this.$route.meta.title"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-address-list
      ref="selectaddr"
      v-model="chosenAddressId"
      show-item-bottom
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
      Slots="top"
    >
      <template #item-bottom>
        <div class="delicon" @click.stop="deladdr()">
          <van-icon name="cross" color="#969799" />
        </div>
      </template>
    </van-address-list>
  </div>
</template>

<script>
import { getAddresslistApi, deleAddrApi, getAddrApi } from "@/api/address";
export default {
  data() {
    return {
      list: [],

      chosenAddressId: "1",
      fromroute: "",
    };
  },
  watch: {
    $route(to, from) {
      console.log(to);
      console.log(from);
    },
  },
  beforeRouteEnter(to, from, next) {
    // ...
    // ...
    console.log(to);
    console.log(from);
    console.log(next);
    if (from.path == "/mine") {
      next((vm) => {
        vm.fromroute = "/mine";
      });
    } else if (from.name == "OrderList") {
      next((vm) => {
        // vm.fromroute='/orderlist';
        vm.fromroute = "/orderlist";
      });
    } else if (from.path == "/addaddr2") {
      next((vm) => {
        vm.fromroute = "/addaddr2";
      });
    }
    next();
  },

  methods: {
    // 跳转到添加地址页面
    onAdd() {
      this.$router.push("/addaddr");
    },
    // 跳转到修改地址页面
    onEdit(item) {
      this.$router.push("/editaddr/" + item.id);
    },
    // 加载地址列表
    async loadAddr() {
      const result = await getAddresslistApi();

      const addrArr = result.addresses;
      // 遍历地址列表数组
      addrArr.forEach((addr) => {
        const addrObj = {
          id: addr._id,
          name: addr.receiver,
          tel: addr.mobile,
          address: addr.regions,
          isDefault: addr.isDefault,
        };
        // 将每个地址push到this.list中
        this.list.push(addrObj);
        if (this.list.length != 0) {
          this.chosenAddressId = this.list[0].id;
        }
      });
      // 获取默认地址
      var defaultaddr;
      this.list.forEach((addr, index) => {
        if (addr.isDefault == true) {
          // 获取默认地址，并从this.list中删除
          defaultaddr = this.list.splice(index, 1);
        }
      });
      // console.log(defaultaddr[0]);
      // 如果存在默认地址，就将默认地址插入到数组的第一个
      if (defaultaddr) {
        this.list.unshift(defaultaddr[0]);
      }
    },
    // 删除地址
    deladdr() {
      console.log(222, this);
      setTimeout(async () => {
        const addr = await getAddrApi(this.chosenAddressId);
        console.log(addr);
        this.$dialog
          .confirm({
            message: `你确定要删除${addr.receiver}这个地址吗?`,
          })
          .then(async () => {
            // on confirm
            const result = await deleAddrApi(this.chosenAddressId);
            console.log(result);
            // 重新加载地址列表
            this.list = [];
            await this.loadAddr();
          })
          .catch(() => {
            // on cancel
          });
      }, 0);
    },
    addonclik() {
      var doms;
      if (this.$refs.selectaddr) {
        doms = this.$refs.selectaddr.children;
        for (let i = 0; i < doms.length - 1; i++) {
          console.log(doms[i]);
          doms[i].addEventListener("click", () => {
            this.$router.push("/orderlist/" + this.chosenAddressId);
          });
        }
        doms[doms.length - 1].addEventListener("click", () => {
          this.$router.push("/addaddr2");
        });
      }
    },
    //  点击返回按钮
    onClickLeft() {
      setTimeout(() => {
        console.log(this.fromroute);
        if (this.fromroute != "/orderlist" && this.fromroute != "/addaddr2") {
          this.$router.push("/mine");
        } else {
          this.addonclik();
          // this.$router.push("/orderlist");
          this.$router.go(-1);
        }
      }, 0);
    },
  },
  async created() {
    await this.loadAddr();
    if (this.list.length != 0) {
      this.chosenAddressId = this.list[0].id;
    }
    console.log(this.fromroute);
    if (this.fromroute == "/orderlist" || this.fromroute == "/addaddr2") {
      console.log("aaa");
      this.addonclik();
    }
  },
  mounted() {},
};
</script>

<style>
.addlist {
  padding-top: 50px;
}

.addlist .van-tag--danger {
  background-color: #0058a3;
}
.addlist .van-button--danger {
  background-color: #000;
  border-color: #000;
  height: 55px;
}
.addlist .van-address-item .van-radio__icon--checked .van-icon {
  background-color: #fff;
  border-color: #0058a3;
}
.addlist .van-radio__icon--checked .van-icon {
  color: #0058a3;
}
.addlist .van-address-list__bottom {
  bottom: 20px;
}
.addlist .van-address-item {
  position: relative;
}
.addlist .van-address-item__edit {
  right: 40px;
}
.addlist .delicon {
  position: absolute;
  top: 40%;
  right: 16px;
}
.addlist .van-nav-bar .van-icon,
.addlist .van-nav-bar__text {
  color: #000;
}
.addlist .van-nav-bar {
  position: fixed;
  width: 100%;
  top: 0;
}
</style>
